import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

class ListView2Page extends StatefulWidget {
  @override
  _ListView2PageState createState() => _ListView2PageState();
}

class _ListView2PageState extends State<ListView2Page> {

  static const loadingTag =  "##loading##";
  var _words = <String>[loadingTag];

  @override
  void initState() {
    super.initState();
    _retrieveData();
  }

  // 模拟异步获取数据
  void _retrieveData() {
    Future.delayed(
      Duration(
        seconds: 2
      )
    ).then((e) {
      _words.insertAll(_words.length - 1, generateWordPairs().take(20).map((e) => e.asPascalCase).toList());
      setState(() { });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Infinite List View"),
      ),
      body: ListView.separated(
        itemCount: _words.length,
        itemBuilder: (context, index) {
          if (_words[index] == loadingTag) {
            if (_words.length - 1 < 100) {
              _retrieveData();
              return Container(
                padding: const EdgeInsets.all(16),
                alignment: Alignment.center,
                child: SizedBox(
                  width: 24,
                  height: 24,
                  child: CircularProgressIndicator(
                    strokeWidth: 2,
                  ),
                ),
              );
            } else {
              return Container(
                alignment: Alignment.center,
                padding: EdgeInsets.all(16),
                child: Text(
                  "No more data",
                  style: TextStyle(
                    color: Colors.grey
                  ),
                )
              );
            }
          }

          return ListTile(
            title: Text(_words[index])
          );
        },

        separatorBuilder: (context, index) => Divider(height: .5),
      ),
    );
  }
}
